import { GetQuestionTypesByActionCodeApi } from '@/api';
import { Button } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import SelectItem from './components/SelectItem';
import './select.less';

const TestTypes: ISelectOption[] = [
  { key: '全部', value: 'all' },
  { key: '未做', value: 'notdone' },
  { key: '已做', value: 'done' },
  { key: '错误', value: 'err' },
];

const TestNumbs: ISelectOption[] = [
  { key: '5', value: 5 },
  { key: '10', value: 10 },
  { key: '20', value: 20 },
  { key: '30', value: 30 },
  { key: '50', value: 50 },
  { key: '100', value: 100 },
];

interface IParams {
  actionCode: string;
  // 下面这个写法，可以让 IParams的实例对象，通过 [key] 这种写法来访问或者设置 内部的属性 -- 索引器
  [key: string]: string;
}

const TypeMap: ITypeMap = {
  all: '全部',
  qa: '问答',
  fill: '填空',
  one: '单选',
  check: '判断',
  code: '编程',
  many: '多选',
};

function useQuestionParams(): [IDataParams, Function] {
  const { actionCode } = useParams<IParams>();
  const [testNum, setTestNum] = useState(5);
  const [testType, setTestType] = useState('all');
  const [questionType, setQuestionType] = useState('all');

  function setData(params: IDataParams) {
    params.testNum && setTestNum(params.testNum);
    params.testType && setTestType(params.testType);
    params.questionType && setQuestionType(params.questionType);
  }

  const data: IDataParams = { actionCode, testNum, testType, questionType };
  return [data, setData];
}

export default function Select() {
  const [questionTypes, setQuestionTypes] = useState<ISelectOption[]>([]);
  // 通过下面的三个组件得到的去练习页面请求数据的对象
  const [data, setData] = useQuestionParams();

  useEffect(() => {
    // params.actionCode 可能会有，可能没有，但是我们自己知道，一定会有
    // 通过一个 ! 告诉 ts的编译器，这个数据一定有 --- 类型断言
    GetQuestionTypesByActionCodeApi(data.actionCode!).then((res) => {
      if (res.errCode === 0) {
        // res.data 里面的数据是  {key:'all',value:12}
        // 我们想要的是 {key:'全部12',value:'all'}
        // TypeMap[res.data[0].key] + '' + res.data[0].value === 全部12
        let temp = res.data.map((item) => {
          return {
            key: TypeMap[item.key] + item.value, // 全部12
            value: item.key, // all
          };
        });
        setQuestionTypes(temp);
      }
    });
  }, []);
  const navigate = useNavigate();
  const gotoPractice = () => {
    navigate('/practice', {
      state: data,
    });
  };

  return (
    <div className="select">
      <div className="btns">
        <Button variant="contained" onClick={gotoPractice}>
          进入练习模式
        </Button>
        <Button variant="contained" color="warning">
          进入考试模式
        </Button>
      </div>
      <SelectItem
        title="试题分类"
        data={TestTypes}
        onChange={(val) => {
          setData({
            testType: val,
          });
        }}
      />
      <SelectItem
        title="题目分类"
        data={questionTypes}
        onChange={(val) => {
          setData({
            questionType: val,
          });
        }}
      />
      <SelectItem
        title="做题数量"
        data={TestNumbs}
        onChange={(val) => {
          setData({
            testNum: val,
          });
        }}
      />
    </div>
  );
}
